<template>
  <div>
    <div class="header-btn">
      <div>问卷详情</div>
      <div>
        <el-button type="info" plain @click="goBack">返回</el-button>
      </div>
    </div>
    <div class="wrap g-card">
      <div class="title-header">问卷基础信息</div>
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="标题">{{ form.title }}</el-form-item>
        <el-form-item label="个人分组" prop="groupId">
          <el-input v-model="groupName" disabled style="width: 280px;"></el-input>
        </el-form-item>
        <el-form-item label="说明">{{ form.description }}</el-form-item>
        <el-form-item label="字段">
          <el-table :data="tableData" style="width: 520px;">
            <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
            <el-table-column prop="title" label="字段标题" align="center"></el-table-column>
            <el-table-column prop="mode" label="类型" align="center"></el-table-column>
            <el-table-column prop="isFill" label="必填" align="center">
              <template slot-scope="scope">
                {{ scope.row.isFill ? '是' : '否' }}
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
    </div>
    <div class="wrap g-card" style="margin-bottom: 20px">
      <div class="title-header">问卷高级功能</div>
      <el-form label-width="120px" :model="form" :rules="rules" ref="form">
        <el-form-item label="问卷有效期" prop="isLongEffective">
          <el-radio-group v-model="form.isLongEffective" style="display:inline-block" disabled>
            <el-radio label="1" style="display:inline-block">永久有效</el-radio>
            <el-radio label="0" style="display:inline-block">自定义时间</el-radio>
          </el-radio-group>
          <el-date-picker style="display:inline-block ; margin-left: 8px" v-if="form.isLongEffective == 0"
            v-model="effectiveDate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
            value-format="yyyy-MM-dd" :picker-options="pickerOptions" disabled>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="使用成员" prop="userdMember">
          <el-tag v-for="(item, index) in form.userNameList" :key="index">{{ item }}</el-tag>
        </el-form-item>
        <el-form-item label="提交页面后设置" prop="isJump">
          <el-switch v-model="isJumpSwitch" disabled></el-switch>
          <template v-if="isJumpSwitch">
            <div>
              <el-radio-group v-model="form.isJump" style="display:flex" disabled>
                <el-radio label="0">跳转链接</el-radio>
                <el-radio label="1">跳转二维码</el-radio>
              </el-radio-group>
            </div>
            <div v-if="(form.isJump == 0)">
              <el-input placeholder="请输入链接" v-model="switchUrlOne" disabled></el-input>
            </div>
            <div v-if="(form.isJump == 1)">
              <img :src="switchUrlToo" alt="" class="picTitle">
            </div>
          </template>
        </el-form-item>
        <el-form-item prop="ZNnotice">
          <template slot="label">
            智能跟进
            <el-tooltip class="item" content="当客户提交问卷时，会将客户的行为记录在客户轨迹里" effect="light" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </template>
          <div>
            <el-checkbox label="行为通知" v-model="form.isShortmsgNotice" disabled></el-checkbox>
            <span class="notice">当客户点击或提交问卷时，员工将会收到消息提醒</span>
          </div>
          <div>
            <el-checkbox label="客户标签" v-model="form.isLabelNotice" disabled></el-checkbox>
            <span class="notice">开启后，将会根据规则条件，如符合条件，该客户自动打上对应标签</span>
          </div>
          <div v-show="form.isLabelNotice" style="border: 1px solid #dfe4ed;border-radius: 8px">
            <el-form-item label="标签规则">
              <el-radio-group v-model="form.labelRule" disabled>
                <el-radio label="0">进入问卷</el-radio>
                <el-radio label="1">提交问卷</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="添加标签" required>
              <tag-group v-model="form.weGroupTagVOS" disabled />
            </el-form-item>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="wrap g-card">
      <div class="title-header">封面和摘要</div>
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="封面">
          <img :src="form.photoUrl" alt="" class="picTitle">
        </el-form-item>
        <el-form-item label="摘要">
          {{ form.text }}
        </el-form-item>
      </el-form>
    </div>
    <div class="wrap g-card" style="margin-bottom: 20px" v-if="(levelType == 1)">
      <div class="title-header">其他设置</div>
      <el-form label-width="120px" :model="form" :rules="rules" ref="anotherform" style="width: 60%;">
        <el-form-item label="其他设置" prop="isSync">
          <div style="display: flex;">
            <el-checkbox v-model="isSync" disabled>同步到企业库</el-checkbox>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="wrap g-card">
      <div class="title-header">发送详情</div>
      <div style="padding: 0 20px;">
        <el-table :data="sendTableData">
          <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
          <el-table-column prop="sendBy" label="发送人" align="center">
          </el-table-column>
          <el-table-column prop="writeName" label="发送客户" align="center">
          </el-table-column>
          <el-table-column prop="sendTime" label="发送时间" align="center" :width="180">
          </el-table-column>
          <el-table-column prop="commitTime" label="提交时间" align="center" :width="180">
          </el-table-column>
          <el-table-column prop="scrmTableWriteCodeValueVoList" label="操作" align="center">
            <template slot-scope="{ row }" v-if="row.commitTime">
              <el-button type="text" @click="handleClick(row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <NormalPagination :currentPage="pageNum" :pageSize="pageSize" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
      </div>
    </div>
    <el-dialog title="客户填写详情" :visible.sync="dialogVisible" width="520px" :close-on-click-modal="false">
      <div v-if="(detailsList.length > 0)">
        <div v-for="(item, index) in tableData" :key="item.questionId">
          <template v-if="item.mode === '单选框' || item.mode === '下拉框'">
            <div class="details-title">
              <span class="isFill" v-if="item.isFill === 1">*</span>
              {{ index + 1 }}. {{ item.title }}
            </div>
            <el-radio-group v-model="item.value" disabled>
              <el-radio :label="opt.name" v-for="opt in item.scrmTableQuestionOptionList" :key="opt.optionId">
                {{ opt.name }}
              </el-radio>
            </el-radio-group>
          </template>
          <template v-else-if="item.mode === '多选框'">
            <div class="details-title">
              <span class="isFill" v-if="item.isFill === 1">*</span>
              {{ index + 1 }}. {{ item.title }}
            </div>
            <el-checkbox-group v-model="item.value" disabled>
              <el-checkbox :label="opt.name" v-for="opt in item.scrmTableQuestionOptionList" :key="opt.optionId">
                {{ opt.name }}
              </el-checkbox>
            </el-checkbox-group>
          </template>
          <template v-else-if="item.mode === '单行填空'">
            <div class="details-title">
              <span class="isFill" v-if="item.isFill === 1">*</span>
              {{ index + 1 }}. {{ item.title }}
            </div>
            <el-input disabled v-model="item.value"></el-input>
          </template>
          <template v-else-if="item.mode === '多行填空'">
            <div class="details-title">
              <span class="isFill" v-if="item.isFill === 1">*</span>
              {{ index + 1 }}. {{ item.title }}
            </div>
            <el-input disabled type="textarea" v-model="item.value"></el-input>
          </template>
        </div>
      </div>
      <div v-else>暂无数据</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { categoryList, formMsgQuery, listQuery } from '@/api/article/group'

export default {
  data() {
    return {
      levelType: this.$route.query.levelType,
      id: this.$route.query.id,
      personList: [],//个人分组
      companyList: [],//企业分组
      form: {},
      companyGroupName: '',
      groupName: '',
      isSync: false,
      tableData: [],
      total: 100,
      pageNum: 1,
      pageSize: 20,
      sendTableData: [],
      dialogVisible: false,
      detailsList: [],
      effectiveDate: '',
      isJumpSwitch: true,
      switchUrlOne: '',
      switchUrlToo: '',
      rules: {
        title: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      },
      modeList: [
        { dictValue: '0', dictLabel: '单选框' },
        { dictValue: '1', dictLabel: '多选框' },
        { dictValue: '2', dictLabel: '下拉框' },
        { dictValue: '3', dictLabel: '单行填空' },
        { dictValue: '4', dictLabel: '多行填空' }
      ]
    }
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    goBack() {
      if (+this.$route.query.is_person === 99) {
        this.$router.back(-1)
      } else {
        this.$router.push({
          name: 'FormManage', query: { is_person: this.$route.query.is_person }
        })
      }

    },
    getInfo() {
      formMsgQuery({ id: this.id }).then((res) => {
        if (res.code == 200) {
          this.isJumpSwitch = res.data.scrmTableDetail.isJump === 0 ? true : res.data.scrmTableDetail.isJump === 1 ? true : false
          this.groupName = res.data.groupName
          this.companyGroupName = res.data.companyGroupName
          this.isSync = res.data.scrmTableDetail.isSync === 1 ? true : false
          this.form = res.data.scrmTableDetail || {}
          this.tableData = res.data.scrmTableQuestionAndOptionList || []
          this.form['userNameList'] = this.form.userdMember.split(';')
          this.form.isLongEffective = this.form.isLongEffective + ''
          this.form.isJump = this.form.isJump + ''
          this.form.isShortmsgNotice = this.form.isShortmsgNotice == '1' ? true : false
          this.form.isActivityNotice = this.form.isActivityNotice == '1' ? true : false
          this.form.isLabelNotice = this.form.isLabelNotice == '1' ? true : false
          this.form['isSync'] = res.data.isSync == '1' ? true : false
          if (+this.form.isJump === 0) {
            this.switchUrlOne = this.form.switchUrl
          } else {
            this.switchUrlToo = this.form.switchUrl
          }
          let tmpArr = []
          tmpArr.push(new Date(this.form.startDate))
          tmpArr.push(new Date(this.form.endDate))
          this.effectiveDate = tmpArr
          this.tableData.forEach(item => {
            item.mode = this.selectDictLabel(this.modeList, item.mode)
          })
        }
      }).catch(() => {
        console.log('error')
      })
      this.getSendDetails()
      const data = {
        levelType: 0,
        mediaType: 10
      }
      categoryList(data).then((res) => {
        // 企业分组
        if (res.code == 200) {
          this.companyList = res.data || []
        }
      }).catch(() => {
        console.log('error')
      })
      categoryList({
        levelType: 1,
        mediaType: 10
      }).then((res) => {
        // 个人分组
        if (res.code == 200) {
          this.personList = res.data || []
        }
      }).catch(() => {
        console.log('error')
      })
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getSendDetails()
    },
    handleSizeChange(val) {
      this.pageNum = 1;
      this.pageSize = val;
      this.getSendDetails()
    },
    // 发送详情
    getSendDetails() {
      const params = {
        scrmTableDetailId: this.id,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      listQuery(params).then((res) => {
        if (res.code == 200) {
          this.total = res.total || 0
          this.sendTableData = res.rows || []
        }
      }).catch(() => {
        console.log('error')
      })
    },
    handleClick(row) {
      //发送详情点击
      this.detailsList = row.scrmTableWriteCodeValueVoList
      this.tableData.forEach(item => {
        this.detailsList.forEach(element => {
          if (item.title === element.codeName) {
            item.value = element.inputValue
          }
        })
        if (item.mode === '多选框') {
          let str = item.value
          let arr = str.split(';')
          item.value = arr
        }
      })
      this.dialogVisible = true
    },
    submitForm() {
      console.log('创建')
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/base.scss";

.header-btn {
  @include headerBtn;
}

.wrap {
  @include titleWrap;
}

.details {
  display: flex;

  span {
    flex: 1;
  }
}

.picTitle {
  width: 200px;
}

.notice {
  margin-left: 20px;
  color: #ccc;
}

.details-title {
  padding: 5px 0;
}

.isFill {
  color: #082aff;
}

.el-radio {
  display: block;
  padding: 5px 0;
}
</style>
